import React from 'react';
import { useParams, useLocation } from 'react-router-dom';

const MarketAnalysis = () => {
  const { subpage } = useParams();
  const location = useLocation();
  
  // 确定当前页面类型（市场复盘或实时盘面）
  const pageType = location.pathname.includes('/market-review') ? 'market-review' : 'real-time';
  
  // 如果没有二级页面参数，使用默认值
  const currentSubpage = subpage || (pageType === 'market-review' ? 'daily' : 'market');
  
  const getPageTitle = () => {
    if (pageType === 'market-review') {
      switch(currentSubpage) {
        case 'daily': return '日度复盘';
        case 'weekly': return '周度总结';
        case 'monthly': return '月度报告';
        case 'industry': return '行业分析';
        default: return '市场复盘';
      }
    } else { // real-time
      switch(currentSubpage) {
        case 'market': return '市场概况';
        case 'sector': return '板块轮动';
        case 'monitor': return '实时监控';
        case 'alerts': return '预警信息';
        default: return '实时盘面';
      }
    }
  };
  
  const getPageContent = () => {
    if (pageType === 'market-review') {
      switch(currentSubpage) {
        case 'daily':
          return (
            <div className="page-content">
              <h3>日度市场复盘</h3>
              <p>展示今日市场表现和关键数据分析...</p>
              <div className="chart-placeholder" style={{ height: '300px', background: '#112240', margin: '20px 0' }}>
                <p style={{ textAlign: 'center', padding: '130px 0' }}>日度复盘图表</p>
              </div>
            </div>
          );
        case 'weekly':
          return (
            <div className="page-content">
              <h3>周度市场总结</h3>
              <p>本周市场表现和趋势分析...</p>
              <div className="chart-placeholder" style={{ height: '300px', background: '#112240', margin: '20px 0' }}>
                <p style={{ textAlign: 'center', padding: '130px 0' }}>周度总结图表</p>
              </div>
            </div>
          );
        case 'monthly':
          return (
            <div className="page-content">
              <h3>月度市场报告</h3>
              <p>月度市场表现和宏观经济分析...</p>
              <div className="chart-placeholder" style={{ height: '300px', background: '#112240', margin: '20px 0' }}>
                <p style={{ textAlign: 'center', padding: '130px 0' }}>月度报告图表</p>
              </div>
            </div>
          );
        case 'industry':
          return (
            <div className="page-content">
              <h3>行业分析报告</h3>
              <p>各行业表现对比和详细分析...</p>
              <div className="chart-placeholder" style={{ height: '300px', background: '#112240', margin: '20px 0' }}>
                <p style={{ textAlign: 'center', padding: '130px 0' }}>行业分析图表</p>
              </div>
            </div>
          );
        default:
          return <p>请从左侧选择复盘类型</p>;
      }
    } else { // real-time
      switch(currentSubpage) {
        case 'market':
          return (
            <div className="page-content">
              <h3>实时市场概况</h3>
              <p>展示当前市场整体状况和关键指标...</p>
              <div className="chart-placeholder" style={{ height: '300px', background: '#112240', margin: '20px 0' }}>
                <p style={{ textAlign: 'center', padding: '130px 0' }}>市场概况实时图表</p>
              </div>
            </div>
          );
        case 'sector':
          return (
            <div className="page-content">
              <h3>板块轮动分析</h3>
              <p>实时板块表现和资金流向分析...</p>
              <div className="chart-placeholder" style={{ height: '300px', background: '#112240', margin: '20px 0' }}>
                <p style={{ textAlign: 'center', padding: '130px 0' }}>板块轮动图表</p>
              </div>
            </div>
          );
        case 'monitor':
          return (
            <div className="page-content">
              <h3>实时监控面板</h3>
              <p>关键股票和指标的实时监控...</p>
              <div className="chart-placeholder" style={{ height: '300px', background: '#112240', margin: '20px 0' }}>
                <p style={{ textAlign: 'center', padding: '130px 0' }}>实时监控图表</p>
              </div>
            </div>
          );
        case 'alerts':
          return (
            <div className="page-content">
              <h3>市场预警信息</h3>
              <p>异常波动和风险提示...</p>
              <div className="chart-placeholder" style={{ height: '300px', background: '#112240', margin: '20px 0' }}>
                <p style={{ textAlign: 'center', padding: '130px 0' }}>预警信息图表</p>
              </div>
            </div>
          );
        default:
          return <p>请从左侧选择分析类型</p>;
      }
    }
  };

  // 获取页面主标题
  const getMainTitle = () => {
    return pageType === 'market-review' ? '市场复盘' : '实时盘面';
  };

  return (
    <div className="page-container">
      <h2>{getMainTitle()} - {getPageTitle()}</h2>
      {getPageContent()}
    </div>
  );
};

export default MarketAnalysis;